<template>
  <!-- 短信验证码登入 -->
  <div class="smsContainer">
    <el-form-item label="手机号">
      <el-input
        maxlength="11"
        class="captcha phone"
        v-model="phoneNumber"
      ></el-input>
      <span
        @click="sendSms"
        class="captcha-svg"
        style="
          color: #888;
          line-height: 45px;
          text-decoration: underline;
          user-select: none; "   :v-text="msg"   >
        点击发送验证码
      </span>
    </el-form-item>
    <el-form-item label="验证码">
      <el-input v-model="code"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </div>
</template>
<script>
import * as api from "../../api/users";
export default {
  props: {
    storageUserInfo: {
      type: Function,
      require: true,
    },
  },
  data() {
    return {
      msg: "点击发送验证码",
      flag: true, //  声明一个三方的值
      phoneNumber: "",
      code: "",
    };
  },
  methods: {
    async sendSms() {
      if (this.flag) {
        this.flag = false; //关掉
        // 调用接口 获取验证码
        let res = await api.getSmsCode(this.phoneNumber);
        //    console.log(1111)
        //
        
        
        console.log(res);
        if(res.data.state){
            // 短信发送成功
            this.$message({
                type:"success",
                message:"短信发送成功"
            })
        }   else{this.$message.error('短信发送失败')}
        let delay = 5;
        this.msg = `${delay}秒后重新发送`;
        this.interval = setInterval(() => {
          delay--;
          if (delay < 1) {
            this.msg = "点击发送验证码";
            clearInterval(this.interval);
            this.flag = true;
          } else {
            this.msg = `${delay}秒后重新发送`;
          }
        }, 1000);
      }
    },
    async submit() {
      let res = await api.smsLogin(this.code);
      console.log(res);
      // 调用父组件
      this.storageUserInfo(res.data);
      // 跳转页面
      this.$router.push("/");
    },
  },
};
</script>
<style scoped lang="less">
//样式设置不上的情况,解决方案
//1.检查类名是否正确
//2.检查权重是否正确
//3.检查是否需要穿透
.icon-wx {
  width: 25px !important;
  height: 25px !important;
  vertical-align: -7px;
  margin-right: 3px;
}

.login-container {
  text-align: center;
  color: #fff;

  .common-login {
    padding-right: 50px;
  }

  //二维码样式
  .erwei .img {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;

    img {
      position: absolute;
      left: 0;
    }

    .mask {
      width: 100%;
      height: 100%;
      opacity: 0.8;
      background-color: #fff;
      position: absolute;
      left: 0;
      // background-image: url("../../assets/img/scancode.png");
      background-size: 50%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }

  .jiaobiao {
    font-size: 60px;
    color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: 0.7;
  }

  .video {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .bg2 {
    background-image: url("../../assets/img/bg2.png");
    background-repeat: no-repeat;
    position: fixed;
    width: 20%;
    height: 40%;
    background-size: 100% 100%;
    left: 20%;
    top: 40%;
    opacity: 0.5;
  }

  .el-form {
    position: fixed;
    right: 10%;
    top: 25%;
    border-radius: 5px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 100px 0 50px 0;

    /deep/ .el-input__inner {
      width: 250px;
    }

    /deep/ .el-button--primary {
      background: linear-gradient(90deg, #1596fb, #002dff);
      width: 250px;
    }

    /deep/ .el-form-item__label {
      color: #fff;
    }

    .title {
      margin: 0 0 60px 0;
      text-align: center;
      color: #fff;
    }

    /deep/ .captcha {
      width: 100px;
      vertical-align: top;

      .el-input__inner {
        width: 100%;
        height: 45px;
        border-radius: 5px 0 0 5px;
        border: 0;
        font-size: 18px;
      }
    }

    svg path {
      stroke: red;
    }

    .captcha-svg {
      background: #fff;
      display: inline-block;
      height: 45px;
      width: 150px;
      text-align: center;
      cursor: pointer;
      border: 0;
      border-radius: 0px 5px 5px 0;
    }

    .el-form-item__content {
      margin-left: 30px !important;
      width: 250px !important;
    }
  }
}

.sms {
  margin-left: -15px !important;
  width: 250px !important;
}

.smsContainer {
  padding-right: 20px !important;
  width: 89%;

  /deep/ .el-form-item__label {
    // margin-left: 80px !important
    padding: 0 !important;
    padding-right: 10px !important;
  }

  /deep/ .phone {
    width: 140px !important;
  }

  /deep/ .captcha-svg {
    width: 115px !important;
  }

  /deep/ .el-form-item__content {
    margin: 0;
  }
}

// .smsContainer{
// 	width:300px;
// }
</style>
